<template>
    <div class="app-container">

        <!-- 查询和其他操作  -->
        <div class="filter-container">
            <el-select v-model="listQuery.shopId" clearable :placeholder="$t('请选择门店')">
                <el-option v-for="item in shops" :value="item.id" :label="item.name"></el-option>
            </el-select>
            <!-- <el-select v-model="listQuery.typeId" clearable :placeholder="$t('请选择充值类型')">
                <el-option v-for="item in rechargeType" :value="item.value" :label="item.label"></el-option>
            </el-select>
            <el-select v-model="listQuery.payTypeId" clearable :placeholder="$t('请选择充值方式')">
                <el-option v-for="item in rechargePayType" :value="item.value" :label="item.label"></el-option>
            </el-select>
            <el-select v-model="listQuery.fromId" clearable :placeholder="$t('请选择充值来源')">
                <el-option v-for="item in rechargeFrom" :value="item.value" :label="item.label"></el-option>
            </el-select>
            <el-date-picker v-model="listQuery.timeHorizon" value-format="yyyy-MM-dd hh:mm:ss" type="daterange"
                align="right" unlink-panels range-separator="——" :start-placeholder='$t("开始日期")'
                :end-placeholder='$t("结束日期")' :picker-options="pickerOptions">
            </el-date-picker> -->

            <el-button type="primary" icon="el-icon-search" @click="handleFilter">{{$t('Search')}}</el-button>
        </div>

        <div style="margin-top: 20px">
            <svg-icon icon-class="marker" style="color: #606266" />
            <span class="font-small">{{$t('Summary')}}</span>
        </div>

        <div class="table-layout">
            <el-row>
                <el-col :span="8" class="table-cell-title">{{$t('总充值金额')}}</el-col>
                <el-col :span="8" class="table-cell-title">{{$t('线上APP总充值')}}</el-col>
                <el-col :span="8" class="table-cell-title">{{$t('线下POS总充值')}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="8" class="table-cell">${{summary.totalAmount}}</el-col>
                <el-col :span="8" class="table-cell">${{summary.appAmount}}</el-col>
                <el-col :span="8" class="table-cell">${{summary.posAmount | floorTwoDecimal}}</el-col>

            </el-row>
        </div>

        <div style="margin-top: 20px">
            <svg-icon icon-class="marker" style="color: #606266" />
            <span class="font-small">{{$t('Details')}}</span>

        </div>
        <p></p>
        <!-- 查询结果 -->
        <el-table v-loading="hQListLoading" :data="hQList" :element-loading-text="$t('Searching')" border fit
                  highlight-current-row>
          <el-table-column align="center" type="index"  :index="getIndex" :label="$t('序号')" width="50"></el-table-column>
          <el-table-column align="center" :label="$t('门店')" prop="shopName" />
          <el-table-column align="center" :label="$t('线上APP总充值($)')" prop="appAmount" />
          <el-table-column align="center" :label="$t('Operate')" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button icon="el-icon-view" type="primary" plain1 size="mini"
                         @click="handleDetail(scope.row)">{{$t('Details')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266" />
        <span class="font-small">{{$t('Details')}}</span>

      </div>
      <p></p>
        <!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" :element-loading-text="$t('Searching')" border fit
            highlight-current-row>
            <el-table-column align="center" type="index"  :index="getIndex" :label="$t('序号')" width="50"></el-table-column>
            <el-table-column align="center" :label="$t('门店')" prop="shopName" />
            <el-table-column align="center" :label="$t('线下POS总充值($)')" prop="posAmount" />
            <el-table-column align="center" :label="$t('Operate')" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button icon="el-icon-view" type="primary" plain1 size="mini"
                        @click="handleDetail(scope.row)">{{$t('Details')}}</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" />
    </div>
</template>

<script>
    import { rechargeList, summary ,hQRechargeList} from '@/api/order'
    import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
    import checkPermission from '@/utils/permission' // 权限判断函数
    import { allForPerm } from '@/api/shop'
    import store from '@/store'

    export default {
        name: 'orderRefund',
        components: { Pagination },
        data() {
            return {
                // 当前店铺
                shop: store.state.user.shop,
                list: [],
                total: 0,
                listLoading: true,

                hQList: [],
                hQListLoading: true,

                rechargeFrom: [
                    { value: 1, label: "线上APP充值" },
                    { value: 2, label: "线下POS充值" },
                ],
                rechargeType: [
                    { value: 1, label: "礼物卡" },
                    { value: 2, label: "余额" },
                ],
                rechargePayType: [
                    { value: 1, label: "现金支付" },
                    { value: 2, label: "礼物卡支付" },
                    { value: 3, label: "Paypal支付" },
                    { value: 4, label: "余额支付" },
                    { value: 5, label: "Clover支付" },
                    { value: 6, label: "积分兑换" },
                ],
                listQuery: {
                    page: 1,
                    limit: 10,
                    sort: 'add_time',
                    order: 'desc',

                    typeId: undefined,
                    payTypeId: undefined,
                    fromId: undefined,
                    shopId: undefined,
                    timeHorizon:undefined,
                },
                summary: {},
                pickerOptions: {
                    shortcuts: [{
                        text: this.$t('Yesterday'),
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: this.$t('Last_7_days'),
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: this.$t('Last_month'),
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            picker.$emit('pick', [start, end])
                        }
                    }]
                },
                // 是否选择门店
                isSelectShop: true,
                // 是否选择时间
                isSelectTime: true,
                shops: []
            }
        },
        created() {
            // // 店铺打开
            // if (this.shop) {
            //     this.isSelectShop = false
            //     this.listQuery.shopId = this.shop.id
            // }

            // // 传递店铺id
            // const shopId = this.$route.query.shopId
            // if (shopId) {
            //     this.isSelectShop = false
            //     this.listQuery.shopId = shopId

            //     this.isSelectTime = false
            //     this.listQuery.startTime = this.$route.query.startTime
            //     this.listQuery.endTime = this.$route.query.endTime
            // }
            allForPerm().then(response => {
                this.shops = response.data.data.list
            })
            this.getList()
            this.getHqList()
        },
        methods: {
            checkPermission,
            getHqList(){
              hQRechargeList().then(response => {
                this.hQList = response.data.data.list
                this.hQListLoading = false
              }).catch(() => {
                this.hQList = []
                this.hQListLoading = false
              })
            },
            getList() {
                this.listLoading = true
                // 概况
                summary(this.listQuery).then(response => {
                    this.listLoading = false
                    this.summary = response.data.data
                    console.log('概况')
                    console.log(response.data)
                }).catch(response => {
                    this.listLoading = false
                    this.$notify.error({
                        title: this.$t('Failed'),
                        message: this.$t(response.data.errmsg)
                    })
                })

                // // 详情
                rechargeList(this.listQuery).then(response => {
                    this.list = response.data.data.list
                    this.total = response.data.data.total
                    this.listLoading = false
                }).catch(() => {
                    this.list = []
                    this.total = 0
                    this.listLoading = false
                })
            },
            handleFilter() {
                this.listQuery.page = 1
                this.getList()
            },

            handleDetail(row) {
                this.$router.push({ path: 'recharge/rechargeDetail', query: { id: row.shopId } })
            },

            getIndex(index) {
                return (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit;
            }
        }
    }
</script>

<style scoped>
    .detail-container {
        width: 80%;
        padding: 20px 20px 20px 20px;
        margin: 20px auto;
    }

    .operate-container {
        background: #F2F6FC;
        height: 80px;
        margin: -20px -20px 0;
        line-height: 80px;
    }

    .operate-button-container {
        float: right;
        margin-right: 20px
    }

    .table-layout {
        margin-top: 20px;
        border-left: 1px solid #DCDFE6;
        border-top: 1px solid #DCDFE6;
    }

    .table-cell {
        height: 60px;
        line-height: 40px;
        border-right: 1px solid #DCDFE6;
        border-bottom: 1px solid #DCDFE6;
        padding: 10px;
        font-size: 14px;
        color: #606266;
        text-align: center;
        overflow: hidden;
    }

    .table-cell-title {
        border-right: 1px solid #DCDFE6;
        border-bottom: 1px solid #DCDFE6;
        padding: 10px;
        background: #F2F6FC;
        text-align: center;
        font-size: 14px;
        color: #303133;
    }
</style>
